<script setup>
import {ref} from "vue";
import {nanoid} from 'nanoid'

const tableRef = ref()
const props = defineProps(["params"])
const addEmptyHeaders = () => {

	const id = nanoid(5)
	let d = {
		_key: id,
		headerName: null,
		headerValue: null,
		requiredFlag: false

	}
	props.params.headers.push(d)
	// tableRef.value.addRecord(d)
	// props.params.headers = tableRef.value.getRecords();
}


const headerColumns = ref([
	{
		title: 'headerName',
		key: 'headerName',
		dataIndex: 'headerName',
		editor: 'input'
	},
	{
		title: 'headerValue',
		key: 'headerValue',
		dataIndex: 'headerValue',
		editor: 'input'
	},
	{
		title: '必填',
		key: 'requiredFlag',
		cellType: 'checkbox',
		slot: 'checkbox',
		mapping: [
			{
				key: true,
				value: '是'
			},
			{
				key: false,
				value: '否'
			}
		]

	},
	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 30,
		fixed: 'right',
		buttonList: [
			{
				type: "primary",
				click: (field, record) => {
					remove(record)
				},
				render: (record) => {
					return "删除";
				}
			},
		]
	},
]);


const remove = (r) => {
	tableRef.value.removeByRecord(r)
	props.params.headers = tableRef.value.getRecords();

}
const cellClick = (field, row) => {
	if (field != 'requiredFlag') {
		return
	}

	row.requiredFlag = !row.requiredFlag
}
</script>

<template>
	<a-row justify="end" class="mb-2">
		<el-col :span="2">
			<a-button type="primary" @click="addEmptyHeaders">新增</a-button>
		</el-col>
	</a-row>

	<a-row justify="start">
		<a-col :span="24">
			<h-table :height="200" :bordered="true" ref="tableRef"
					 :cellClick="cellClick"
					 :columns="headerColumns" :showPagination="false"
					 :data="props.params.headers">
			</h-table>
		</a-col>
	</a-row>
</template>

<style scoped></style>
